<template>
  <div class="pie-chart" :style="{width: width, height: height}"></div>
</template>
<script>
  import echarts from 'echarts'
  require('echarts/theme/macarons')
  export default {
    name: 'PreChart',
    props: {
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '333px'
      }
    },
    data () {
      return {
        chart: null
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
    },
    methods: {
      initChart(){
        this.chart = echarts.init(this.$el)

        let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#fff'
            }
          }
        },
        // feature: {
        //   dataView: { show: true, readOnly: false },
        //   restore: { show: true },
        //   saveAsImage: { show: true }
        // }
        legend: {
          data: ['已住', '未住'],
          // itemWidth: 10, // 修改图例的图标
          // itemHeight: 10,
          textStyle: { // 图例(文字说明)样式
            color: '#fff'
          }
        },
        xAxis: [
          {
            type: 'category',
            data: ['1栋', '2栋', '3栋', '4栋', '5栋', '6栋', '7栋','8栋','9栋','10栋'],
            axisPointer: {
              type: 'shadow'
            },
            axisLabel: { // x轴文字的样式
              textStyle: {
                color: '#fff'
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#fff',
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '比率',
            min: 1,
            max: 100,
            interval: 10,
            axisLabel: {
              formatter: '{value} %',
              textStyle: {
                color: '#fff'
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#fff',
              }
            }
          }
        ],
        series: [
          {
            name: '已住', // 柱子的配置
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + ' %';
              }
            },
            data: [
              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 35.6, 62.2, 32.6, 20.0, 6.4, 3.3
            ],
            itemStyle: { // 柱子的背景图
              normal: {
                color: '#3087ca'
              }
            }
          },
          {
            name: '未住',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + ' %';
              }
            },
            data: [
              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 17.6, 18.2, 48.7, 18.8, 6.0, 2.3
            ],
            itemStyle: {
              normal: {
                color: '#fd6331'
              }
            }
          }
        ]
      };
        this.chart.setOption(option)
      }
    }
  }
</script>